<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>车牌管理系统--登录页面</title>
    <script th:src="@{/elementui/vue2-7.js}"></script>
    <script th:src="@{/elementui/index.js}"></script>
    <link rel="stylesheet" th:href="@{/elementui/index.css}"/>
    <link rel="stylesheet" th:href="@{/css/login.css}"/>
</head>
<body>

<div id="app">
    <div id="admin">
        <div class="pos" v-loading="loading">
            <h1 class="adminh1">用户登录</h1>
            <el-form
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="账号：" prop="account">
                    <el-input
                            prefix-icon="el-icon-user"
                            style="width: 250px"
                            placeholder="请输入账号"
                            type="text"
                            v-model="ruleForm.account"
                            autocomplete="off"
                            name="account"
                            maxlength="10"
                            show-word-limit
                    ></el-input>
                </el-form-item>
                <el-form-item label="密 码：" prop="password">
                    <el-input
                            prefix-icon="el-icon-key"
                            style="width: 250px"
                            placeholder="请输入密码"
                            show-password
                            type="password"
                            v-model="ruleForm.password"
                            autocomplete="off"
                            name="password"
                            maxlength="15"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" id="login" @click="login('ruleForm')">登录</el-button>
                    <el-button type="primary" id="reset" @click="registerForm()">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>


</body>
</html>

<script th:src="@{/js/axios-0.18.0.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script>
    var vue = new Vue({
        el: "#app",
        ruleForm: {},
        data(){
            var validatePassAc = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入账号"));
                } else {
                    if (this.ruleForm.password !== "") {
                        this.$refs.ruleForm.validateField("password");
                    }
                    callback();
                }
            };
            var validatePassPwd = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入密码"));
                } else if (value.length < 6 || value.length > 15) {
                    callback(new Error("长度必须在6-15之内!"));
                } else {
                    callback();
                }
            };
            return {
                loading: false,
                ruleForm: {
                    account: "",
                    password: "",
                },
                rules: {
                    account: [{validator: validatePassAc, trigger: "blur"}],
                    password: [{validator: validatePassPwd, trigger: "blur"}],
                },
            };
        },
        methods: {
            login(ruleForm){
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        axios.post("/user/login",this.ruleForm).then( async (response) => {
                            if (response.data.code === 20041) {
                                this.loading = true;
                                console.log("登录成功!!!");
                                this.$message.success(response.data.msg);
                                setTimeout(() => {
                                    this.loading = false;
                                }, 1000);
                                await this.sleep(1000);
                                if (response.data.data === true) {
                                    // window.location.href = "/mains";
                                    window.location.href = "/rootmain";
                                } else {
                                    // window.location.href = "/main";
                                    window.location.href = "/usermain";
                                }
                            } else {
                                this.loading = true;
                                console.log("登录失败!!!");
                                this.$message.info(response.data.msg);
                                setTimeout(() => {
                                    this.loading = false;
                                }, 1000);
                                await this.sleep(1000);
                            }
                        });
                    } else {
                        this.$message.info("请输入正确的账号及密码！");
                        console.log("error submit!!");
                        return false;
                    }
                })
            },
            registerForm(){
                window.location.href = "/register";
                console.log("进入注册页面！");
            },
            //睡眠
            sleep(time) {
                return new Promise(resolve => setTimeout(resolve, time));
            },
        },

    })
</script>